<template>
  <!--最新音乐-->
  <el-row style="margin-top: 25px;">
    <p>
      语种:
      <span id="types" v-for="(item,index) in musicType" @click="changeType(item.type)"
            :class="index===0 ? 'isActive' : 'types'+ item.type"
            style="margin-left: 25px;cursor: pointer;">{{ item.name }}</span>
    </p>

    <!--左侧-->
    <el-col :span="20" :offset="2">
      <el-table :data="newMusicInfo" stripe
                :show-header="false" v-show="isReturn">
        <el-table-column type="index">
          <template scope="scope">
            {{ scope.$index + 1 >= 10 ? scope.$index + 1 : '0' + (scope.$index + 1).toString() }}
          </template>
        </el-table-column>
        <!--序号加图片显示-->
        <el-table-column label="#" width="120px">
          <template scope="scope">

            <i class="el-icon-video-play" @click="changeNewUrl(scope.row.id)"
               style="position: absolute;font-size: 25px;top: 35px;left:35px;z-index: 8;cursor:pointer;"></i>

            <el-image :src="scope.row.album.picUrl" @click="changeNewUrl(scope.row.id)"
                      style="width: 75px;height: 75px;cursor:pointer;">
              <template slot="placeholder">
                <p>加载中</p>
              </template>
            </el-image>

          </template>
        </el-table-column>

        <el-table-column label="歌名" prop="name">
          <template scope="scope">
            <span
                :title="scope.row.alias.length===0?scope.row.name:scope.row.name+'('+scope.row.alias[0]+')'"
                style="font-size: 15px;font-weight: 500;width: 200px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
             {{
                scope.row.alias.length === 0 ? scope.row.name : scope.row.name + '(' + scope.row.alias[0] + ')'
              }}
            </span>
            <!--            <span v-if="scope.row.song.sqMusic"-->
            <!--                  style="box-shadow: 0px 0px 5px 2px rgba(255,0,0,0.1);padding: 0 2px;border: solid 1px red;color: red;border-radius: 5px;margin-right: 10px;user-select: none">{{-->
            <!--                scope.row.song.sqMusic ? scope.row.song.sqMusic.sr === 44100 ? 'SQ' : 'Hi-Res' : ''-->
            <!--              }}</span>-->
          </template>
        </el-table-column>

        <el-table-column label="歌手" width="130px;">
          <template scope="scope">
                <span v-for="(item,index) in scope.row.artists" style="cursor: pointer">
                    {{
                    index === 0 && scope.row.artists.length > 1 && index !== scope.row.artists.length - 1
                        ? item.name + '/' : item.name
                  }}
                </span>
          </template>
        </el-table-column>

        <el-table-column label="专辑" prop="album.name"></el-table-column>

        <el-table-column label="时长" prop="duration" width="80px;"></el-table-column>
      </el-table>
      <p v-show="!isReturn">加载中...</p>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      //数据已返回
      isReturn: false,
      //筛选条件
      queryInfo: {
        type: 0
      },
      //标签数据
      musicType: [
        {type: 0, name: '全部'},
        {type: 7, name: '华语'},
        {type: 96, name: '欧美'},
        {type: 16, name: '韩国'},
        {type: 8, name: '日本'}
      ],
      //最新音乐的数据
      newMusicInfo: [
        {
          id: 0,
          album: {
            picUrl: ''
          },
          alias:[],
          artists:[]
        },

      ],
      //上一次点击的分类(默认的是type-1)
      prevType: 'types' + 0,
    }
  },
  created() {
    //获取最新音乐
    this.getNewMusic()
  },
  methods: {
    getNewMusic() {
      this.$http.get('top/song', {params: this.queryInfo}).then(res => {
        this.newMusicInfo = res.data.data
        // this.newMusicInfo.forEach((item,index) => {
        //   console.log(index+1,item.hMusic.size/item.duration)
        // })
        //处理时长数据
        this.newMusicInfo.forEach(item => {
          const dt = new Date(item.duration)
          const mm = (dt.getMinutes() + '').padStart(2, '0')
          const ss = (dt.getSeconds() + '').padStart(2, '0')
          item.duration = mm + ':' + ss
        })
        this.isReturn = true
      })
    },
    //改变筛选条件
    changeType(typeId) {
      //撤销上一次被选中的标签的样式
      this.$('.isActive').eq(0).attr('class', this.prevType)
      //这次点击的标签高亮
      this.$('.types' + typeId).eq(0).attr('class', 'isActive')
      this.queryInfo.type = typeId
      //赋值存储
      this.prevType = 'types' + typeId
      this.getNewMusic()
    },
    //播放点击的最新音乐
    changeNewUrl(musicId) {
      var playlist = []
      this.newMusicInfo.forEach(item => {
        playlist.push(item.id)
      })
      this.$emit('setSongListInfo', playlist, musicId)
    },
  }
}
</script>

<style lang="less" scoped>
.isActive {
  color: red;
}
</style>
